<template>
  <div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">作业管理</el-menu-item>
      <el-menu-item index="2"@click="jump">文件管理</el-menu-item>
    </el-menu>
    <div class="line"></div>


    <el-card style="padding: 10px">

      <el-form :model="queryParams">
        <el-input
          style="width: 240px"
          v-model="queryParams.teacherId"
          placeholder="请输入..."
        />
        <el-button >查   询</el-button>

      </el-form>


      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        >
        <el-table-column label="id" align="center" prop="number.number" width="150px"/>
<!--        <el-table-column label="题目" align="center" prop="title" />-->
        <el-table-column prop="title" label="题目">
          <template slot-scope="scope">
            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>
        <el-table-column label="分值" align="center" prop="score" />
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="QuestionDetail(scope.row)">查看提交</el-button>



          </template>
        </el-table-column>
      </el-table>


    </el-card>



  </div>

</template>

<script>
  import { queryQuestionList} from "@/api/teacher/detail/course/detail";

  import { queryProblemByTopicId,eidtProblem,queryProblemById,DeleteProblem,queryByTopicId} from "@/api/teacher/addTopic";
  import { getUserProfile } from "@/api/system/user";
  import { queryCourseList,saveTopic,queryCourseListByCreator,queryCourseListByTitle,saveProblem,queryByTopic} from "@/api/teacher/detail/course/QuestionBank";
  import {getToken} from "@/utils/auth";
  export default {

    name: "TopicDetail",
    created() {
      this.getUser();
    },
    data(){
      return {
        visible: false,
        dialogFormVisible:false,
        dialogFormVisible1:false,
        form:{},
        form1:{},
        activeIndex: '1',
        activeIndex2: '1',
        queryParams: {
          pageNum: undefined,
          pageSize: undefined,
          teacherId: null,
        },
        user: {},
        tableData: [],
        data1:null,

      }
    },

    methods: {
      getUser() {
        this.id = this.$route.query.id//创建作业后传过来title
          queryProblemByTopicId(this.id).then(response => {
            this.tableData = response
          })

      },
      // QuestionPut(row){
      //
      // },
      QuestionDetail(row){
        this.$router.push({ path: 'studentPut', query: { id: row.id ,score:row.score}})
        //通过题目id（problemid）查看提交的人
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },

      jump(){
        this.$router.push('teacher/FileBank')
      },
      // 上传前校检格式和大小
      handleBeforeUpload(file) {
        // 校检文件类型
        if (this.fileType) {
          let fileExtension = "";
          if (file.name.lastIndexOf(".") > -1) {
            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
          }
          const isTypeOk = this.fileType.some((type) => {
            if (file.type.indexOf(type) > -1) return true;
            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
            return false;
          });
          if (!isTypeOk) {
            this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
            return false;
          }
        }
        // 校检文件大小
        if (this.fileSize) {
          const isLt = file.size / 1024 / 1024 < this.fileSize;
          if (!isLt) {
            this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
            return false;
          }
        }
        this.$modal.loading("正在上传文件，请稍候...");
        this.number++;
        return true;
      },
      // 文件个数超出
      handleExceed() {
        this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
      },
      // 上传失败
      handleUploadError(err) {
        this.$modal.msgError("上传图片失败，请重试");
        this.$modal.closeLoading()
      },
      // 上传成功回调
      handleUploadSuccess(res) {
        this.uploadList.push({name: res.fileName, url: res.fileName});
        if (this.uploadList.length === this.number) {
          this.fileList = this.fileList.concat(this.uploadList);
          this.uploadList = [];
          this.number = 0;
          this.$emit("input", this.listToString(this.fileList));
          this.$modal.closeLoading();
          console.log(res)
          const temm = res.msg
          if (res.code === '20220'){
            this.$message.success(temm)
          }else {
            this.$message.error(temm)
          }
        }
      },
      // 删除文件
      handleDelete(index) {
        this.fileList.splice(index, 1);
        this.$emit("input", this.listToString(this.fileList));
      },
      // 获取文件名称
      getFileName(name) {
        if (name.lastIndexOf("/") > -1) {
          return name.slice(name.lastIndexOf("/") + 1);
        } else {
          return "";
        }
      },
      // 对象转成指定字符串分隔
      listToString(list, separator) {
        let strs = "";
        separator = separator || ",";
        for (let i in list) {
          strs += list[i].url + separator;
        }
        return strs != '' ? strs.substr(0, strs.length - 1) : '';
      }
    }
  }
</script>

<style scoped lang="scss">
  .upload-file-uploader {
    margin-bottom: 5px;
  }

  .upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
  }

  .upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
  }

  .ele-upload-list__item-content-action .el-link {
    margin-right: 10px;
  }
</style>
